<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="login-wrapper">
    <form id="form" action="##" method="POST" onsubmit="return false" class="login-form">

      <p>帐号：<input name="acount" id="acount" type="text" placeholder="请输入帐号..." maxlength="5" onblur="check()"></p>
      <p>密码：<input name="b" type="password"></p>
      <p>学历：
        <input name="hobby" type="checkbox"> 大专
        <input name="hobby" type="checkbox" checked="checked"> 本科
      </p>
      <p>性别：
        <input type="radio" name="sex"> 男
        <input type="radio" name="sex" checked="checked"> 女
      </p>
      <p>自我介绍：
        <textarea name="my" id="my" cols="30" rows="10"></textarea>
      </p>
      <input type="button" onclick="loginBtn()" value="LOGIN"/>
    </form>


    
  </div>
</body>

<script>
  function loginBtn() {
    const my = document.querySelector('#my')
    alert(my.value)
  }
  function check() {
    const acount = document.querySelector('#acount')
    console.log(acount.value)
    if(acount.value != 'admin') {
      alert('用户名错误')
    }
  }
</script>

<style>
  .login-wrapper {
    position: absolute;
    top: 200px;
    right: 200px;
    width: 400px;
    height: 600px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-form {
    height: 200px;
  }
</style>
</html>